<template>
	<section>
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="车辆基础信息" name="first">
				<el-form :label-position="labelPosition" label-width="100px">
					<el-row type="flex" justify="center" :gutter="50">
						<el-col :span="10">
							<el-form-item label="车号:">
								苏Js259874
							</el-form-item>
							<el-form-item label="车辆颜色:">
								白色
							</el-form-item>
							<el-form-item label="备注:">
								这里是备注这里是备注这里是备注这里是备注这里是备注这里是备注这里是备注这里是备注这里是备注这里是备注...
							</el-form-item>
						</el-col>
						<el-col :span="10">
							<el-form-item label="线路牌编号:">
								HC-6987466
							</el-form-item>
							<el-form-item label="车属信息:">
								供应商名称
							</el-form-item>
							<el-form-item label="供应商:">
								供应商名称名称
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<el-row type="flex">
					<el-col :span="4" v-for="fit in fits" :key="fit" :offset="3">
						<span class="title">{{ fit }}</span>
						<img :src="url" width="100%">
					</el-col>
				</el-row>
			</el-tab-pane>
			<el-tab-pane label="行驶证信息" name="second">
				<el-form :label-position="labelPosition" label-width="100px">
					<el-row type="flex" justify="center" :gutter="50">
						<el-col :span="10">
							<el-form-item label="行驶证编号:">
								KSs26566556325
							</el-form-item>
							<el-form-item label="品牌型号::">
								大众郎逸
							</el-form-item>
							<el-form-item label="发动机号:">
								LKDFD45326665666346
							</el-form-item>
							<el-form-item label="检验有效期:">
								2021/05/19
							</el-form-item>
							<el-form-item label="强制报废日期:">
								2029/05/19
							</el-form-item>
						</el-col>
						<el-col :span="10">
							<el-form-item label="车辆识别代码:">
								62562+5+652+6554r
							</el-form-item>
							<el-form-item label="核定载人数:">
								62
							</el-form-item>
							<el-form-item label="注册日期:">
								2021/08/09
							</el-form-item>
							<el-form-item label="发证日期:">
								2029/08/09
							</el-form-item>
							<el-form-item label="外廓尺寸:">
								长12M*宽5M*高8M
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<el-row type="flex">
					<el-col :span="4" v-for="box in boxs" :key="box" :offset="3">
						<span class="title">{{ box }}</span>
						<img :src="url" width="100%">
					</el-col>
				</el-row>
			</el-tab-pane>
			<el-tab-pane label="保险信息" name="third">
				<el-form :label-position="labelPosition" label-width="130px">
					<el-row type="flex" justify="center" :gutter="50">
						<el-col :span="10">
							<el-form-item label="交强险终保日期:">
								2021/08/06
							</el-form-item>
							<el-form-item label="商业险终保日期:">
								2021/08/06
							</el-form-item>
						</el-col>
						<el-col :span="10">
							<el-form-item label="承运人险终保日期:">
								2021/08/06
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<el-row type="flex">
					<el-col :span="4" v-for="care in cares" :key="care" :offset="3">
						<span class="title">{{ care }}</span>
						<img :src="url" width="100%">
					</el-col>
				</el-row>
			</el-tab-pane>
			<el-tab-pane label="车辆检查信息" name="fourth">
				<el-row>
					<el-col :span="24">
						<el-table :data="tableData" style="width: 100%">
							<el-table-column prop="date" label="检查日期">
							</el-table-column>
							<el-table-column label="操作">
								<template slot-scope="scope">
									<el-button size="mini" type="primary" @click="see_detail">查看</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-col>
				</el-row>
				<el-row class="paddtop">
					<el-col :span="2" :offset="22">
						<el-button type="primary" @click="adds">新增检查</el-button>
					</el-col>
				</el-row>				
			</el-tab-pane>
		</el-tabs>
	</section>
</template>

<script>
	export default {
		data() {
			return {
				labelPosition: 'right',
				activeName: 'first',
				fits: ['车辆正面：', '车辆侧面：', '车辆内饰：'], //车辆基础信息
				boxs: ['行驶证：'], //行驶证信息
				cares: ['商业险：', '交强险：', '承运人险：'], //保险信息
				url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
				tableData: [{
					date: '2016-05-02',
				}, {
					date: '2016-05-02',
				}, {
					date: '2016-05-02',
				}, {
					date: '2016-05-02',
				}, {
					date: '2016-05-02',
				}, {
					date: '2016-05-02',
				}, {
					date: '2016-05-02',
				}, {
					date: '2016-05-02',
				}],
			}
		},
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
			},
			// 车辆检查详情
			see_detail(){
				this.$router.push({
					path: '/see_detail'
				})
			},
			// 新增检查
			adds(){
				this.$router.push({
					path: '/add_detail'
				})
			}
			
		}
	}
</script>
<style>
	.title {
		padding: 0 0 10px;
		display: block;
	}
	
	.paddtop{
		padding:20px 0;
	}
	
	/* table */
	.am-tabs-bd .am-tab-panel * {
	    -webkit-user-drag: none;
	}
	.am-table-bordered {
	    border: 1px solid #ddd;
	    border-left: none;
	}
	.am-table {
	    width: 100%;
	    margin-bottom: 1.6rem;
	    border-spacing: 0;
	    border-collapse: separate;
	}
	table {
	    max-width: 100%;
	    background-color: transparent;
	    empty-cells: show;
	}
	.am-table-bordered>tbody>tr:first-child>td, .am-table-bordered>tbody>tr:first-child>th {
	    border-top: none;
	}
	.am-table-centered>tbody>tr>td, .am-table-centered>tbody>tr>th, .am-table-centered>tfoot>tr>td, .am-table-centered>tfoot>tr>th, .am-table-centered>thead>tr>td, .am-table-centered>thead>tr>th {
	    text-align: center;
	}
	
	.am-table-bordered>tbody>tr>td, .am-table-bordered>tbody>tr>th, .am-table-bordered>tfoot>tr>td, .am-table-bordered>tfoot>tr>th, .am-table-bordered>thead>tr>td, .am-table-bordered>thead>tr>th {
	    border-left: 1px solid #ddd;
	}
	
	.am-table>tbody>tr>td, .am-table>tbody>tr>th, .am-table>tfoot>tr>td, .am-table>tfoot>tr>th, .am-table>thead>tr>td, .am-table>thead>tr>th {
	    padding: .7rem;
	    line-height: 1.6;
	    vertical-align: top;
	    border-top: 1px solid #ddd;
	}
	
	.am-text-middle {
	    vertical-align: middle!important;
	}
</style>
